Countdown Timer

重點功能說明

1. Deadline顯示區域
2. 倒數計時器

HTML重點

• Deadline顯示區域

  <h4 class="giveaway"></h4>
  

  • 將Deadline顯示區域的Class設為giveaway
  • 內容會在JavaScript中新增

• 倒數計時器

  <div class="deadline">
      <!-- days -->
      <div class="deadline-format">
          <div>
              <h4 class="days">34</h4>
              <span>days</span>
          </div>
      </div>
      <!-- end of days-->
  
      <!-- hours -->
      <div class="deadline-format">
          <div>
              <h4 class="hours">34</h4>
              <span>hours</span>
          </div>
      </div>
      <!-- end of hours-->
  
      <!-- mins -->
      <div class="deadline-format">
          <div>
              <h4 class="mins">34</h4>
              <span>mins</span>
          </div>
      </div>
      <!-- end of mins-->
  
      <!-- secs -->
      <div class="deadline-format">
          <div>
              <h4 class="secs">34</h4>
              <span>secs</span>
          </div>
      </div>
      <!-- end of secs-->
  </div>
  

  • 將整個倒數計時器的Class設為deadline
  • 將個別時間單位DIV的Class設為deadline-format

JavaScript重點

1. 建立月份與星期的陣列

   const months = [`January`,...];
   const weekdays = [`Sunday`,...];
   

2. 利用class="giveaway"去抓取Deadline顯示區域

   const giveaway = document.querySelector('.giveaway');
   

3. 利用class="deadline"去抓取整個倒數計時器

   const deadline = document.querySelector('.deadline');
   

4. 利用class="deadline-format"中的h4元素去抓取個別時間單位的h4元素

   const items = document.querySelectorAll('.deadline-format h4');
   

   • ququerySelector(All)方法還可以選擇該id/class的子元素，詳請請見簡單介紹

5. 取得當前日期

   let tempDate = new Date(); //建立一個Date物件
   let tempYear = tempDate.getFullYear(); //取得當前年份
   let tempMonth = tempDate.getMonth(); //取得當前月份
   let tempDay = tempDate.getDate(); //取得當前日期
   

   • Date物件詳細用法，請見下方參考欄

6. 設定Deadline日期

   const futureDate = new Date(tempYear, tempMonth, tempDay + 10, 11, 30, 0); //設定當前日期的後10天
   
   //取得所有時間元素
   const year = futureDate.getFullYear();
   const hours = futureDate.getHours();
   const minutes = futureDate.getMinutes();
   let month = futureDate.getMonth();
   month = months[month];
   const weekday = weekdays[futureDate.getDay()];
   const date = futureDate.getDate();
   

7. 新增Deadline顯示區域的內文

   giveaway.textContent = `giveaway ends on ${weekday}, ${date} ${month} ${year} ${hours}:${minutes}am`;
   

參考與引用來源

1. Date物件介紹